<template>
  <div ref="imageWrapper">
    <a-card :bordered="false">
      <!-- 查询区域 -->
      <div class="table-page-search-wrapper">
        <a-form-model ref="ruleForm" :model="queryParam" :rules="rules" layout="inline" @keyup.enter.native="loadData">
          <a-row :gutter="24">
            <a-col :md="6" :sm="8">
              <a-form-model-item label="账套/核算单元" prop="accName">
                <a-input
                  @click.native="openSearchModel"
                  readOnly
                  v-model="queryParam.accName"
                  placeholder="请选择账套/核算单元"
                />
              </a-form-model-item>
            </a-col>
            <a-col :md="6" :sm="8">
              <a-form-model-item label="期间" prop="time">
                <a-input @click.native="openSearchModel" v-model="queryParam.time" readOnly placeholder="请选择" />
                <!-- <a-range-picker v-model="dateArray" style="width: 100%" @change="handlePanelChange" /> -->
              </a-form-model-item>
            </a-col>
            <a-col :md="6" :sm="8">
              <a-form-model-item label="科目名称" prop="subject">
                <!-- <a-tree-select
                  v-model="queryParam.subjectCode"
                  tree-data-simple-mode
                  show-search
                  treeNodeFilterProp="title"
                  style="width: 300px"
                  :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                  placeholder="请选择科目"
                  :tree-data="subjectTreeData"
                  allow-clear
                /> -->
                <a-input @click.native="openSearchModel" v-model="queryParam.subject" readOnly placeholder="请选择" />
              </a-form-model-item>
            </a-col>
            <a-col :md="6" :sm="8">
              <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
                <!-- <a-button type="primary" @click="onSearch" icon="search" :loading="loading">查询</a-button> -->
                <!-- <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">清除条件</a-button> -->
                <a-button
                  type="danger"
                  :loading="ydLoading"
                  @click="handleToYD(false)"
                  icon="arrow-right"
                  style="margin-left: 8px"
                  >转疑点</a-button
                >
                <a-button
                  type="primary"
                  style="margin-left: 8px"
                  icon="download"
                  :loading="loadingExp"
                  @click="handleExportXls()"
                  :disabled="!(dataSource.length > 0)"
                  >导出</a-button
                >
                <a-button v-if="isBackButton" type="primary" style="margin-left: 8px" @click="backUppage">
                  返回
                </a-button>
                <!-- <a @click="handleToggleSearch" style="margin-left: 8px">
                  {{ toggleSearchStatus ? '收起' : '展开' }}
                  <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
                </a> -->
              </span>
            </a-col>
          </a-row>
        </a-form-model>
      </div>
      <!-- 操作按钮区域 -->
      <!--    <div class="table-operator">-->
      <!--      <a-button type="primary" @click="openSearchModel()">查询</a-button>-->
      <!--    </div>-->

      <div class="ant-alert ant-alert-info" style="margin: 16px 0">
        <span>科目明细</span>
      </div>
      <a-row :gutter="24">
        <a-col :md="6" :sm="8" style="height: 650px; overflow-x: hidden; overflow-y: auto">
          <a-table
            ref="table"
            size="middle"
            bordered
            class="pointer_table"
            rowKey="subjectCode"
            :columns="columns2"
            :dataSource="leftDataSource"
            :pagination="false"
            :loading="loading"
            @change="handleTableChange"
            :row-selection="rowSelectionOp"
          >
            <template v-slot:subjectName="text">
              <j-ellipsis :value="text" :length="11"></j-ellipsis>
            </template>
          </a-table>
        </a-col>
        <a-col :md="24 - 6" :sm="8">
          <!-- table区域-begin -->
          <div>
            <!-- :customRow="handleClickRow2" -->
            <a-table
              ref="table"
              size="middle"
              bordered
              rowKey="id"
              class="pointer_table"
              :columns="columns"
              :dataSource="dataSource"
              :pagination="ipagination"
              :loading="loading"
              @change="handleTableChange"
              :scroll="{ x: 1700 }"
            >
              <template v-slot:accName="text">
                <j-ellipsis :value="text" :length="6"></j-ellipsis>
              </template>
              <template v-slot:unitName="text">
                <j-ellipsis :value="text" :length="10"></j-ellipsis>
              </template>
              <template v-slot:summary="text">
                <j-ellipsis :value="text" :length="10"></j-ellipsis>
              </template>
              <span slot="affixNum" slot-scope="affixNum">
                <a-icon type="file" />
                {{ affixNum }}
              </span>
              <span slot="action" slot-scope="text, record">
                <a @click="handleClickRow2(record)">关联</a>
                <a-divider type="vertical" />
                <a style="color: red" @click="handleToYD(record)">转疑点</a>
              </span>
            </a-table>
          </div>
          <!-- table区域-end -->
        </a-col>
      </a-row>

      <SearchModal ref="searchModal" @ok="onSearchconfigParams" @clear="clearSearchconfigParams"></SearchModal>
      <YDModel ref="YDModel" :routerData="$route.path" />
      <CheckAndEditModel ref="modalForm" @ok="updateProList"></CheckAndEditModel>
      <CheckOrganModal ref="departModal" @ok="updateQueryParam"></CheckOrganModal>
    </a-card>
  </div>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { YzzxListMixin } from '../mixins/YzzxListMixin'
import SearchModal from './SearchModal'
import columns from './indexColumns'
import columns2 from './workColumns'
import { postAction, getAction } from '@/api/manage'
import CheckAndEditModel from './ModalView/CheckAndEditModel'
import CheckOrganModal from '../testcomponent/CheckOrganModal'
import { base64toImg } from '@/mixins/base64toImg'
import YDModel from '@/views/sj/components/YDModel'
import { currentYMD, beforeyearYMD } from '@/mixins/commontime.js'
import jumpConfigMixin from '@/views/sj/sjxmzygl/sjxmss/jumpConfigMixin'
export default {
  name: 'kmmx',
  mixins: [JeecgListMixin, YzzxListMixin, base64toImg, jumpConfigMixin],
  components: {
    SearchModal,
    CheckAndEditModel,
    CheckOrganModal,
    YDModel
  },
  watch: {
    $route: {
      handler: function(to) {
        if (Object.keys(to.query).length) {
          this.disableMixinCreated = true
          this.queryParam = Object.assign(this.queryParam, to.query)
          this.$nextTick(() => {
            this.onSearch()
          })
        } else if (Object.keys(to.params).length && to.params.from == 'sjxmss') {
          let { returnRecord, accId, accName, unitId, subjectCode } = to.params
          this.isBackButton = true
          this.returnRecord = returnRecord

          let { endDate, startDate } = JSON.parse(to.params.returnRecord)
          this.dateArray = [startDate, endDate]
          this.queryParam.startTime = startDate
          this.queryParam.endTime = endDate

          this.queryParam.accName = accName
          this.queryParam.accCode = accId
          this.queryParam.unitId = unitId
          this.queryParam.subjectCode = subjectCode
          this.$nextTick(() => {
            this.onSearch()
          })
        } else if (Object.keys(to.params).length) {
          if (to.params.from == 'kmye') {
            this.KmyeSearch(to.params)
          } else if (to.params.from == 'zzs') {
            this.ZzsSezrch(to.params)
          }
        }
      },
      immediate: true
    }
  },
  data() {
    return {
      queryParam: {
        accCode: '',
        accName: '',
        unitId: '',
        startTime: beforeyearYMD(2, 'years'),
        endTime: currentYMD()
      },
      isBackButton: false,
      superParam: {
        subjectCode: undefined,
        subjectName: ''
      },
      subjectName: '',
      loadingExp: false,
      // 表头
      columns: columns(this),
      columns2: columns2(this),
      leftDataSource: [],
      dateArray: [beforeyearYMD(2, 'years'), currentYMD()],
      subjectTreeData: [],
      url: {
        leftList: '/sjyzzx/sjZxzyAccountSubject/querySubjectByEleVouche',
        list: '/sjyzzx/sjZxzyAccountVouche/queryVoucheDetailByCondition',
        subjectTree: '/sjyzzx/sjZxzyAccountSubject/queryAllSubjectTree',
        exportXlsUrl: '/sjyzzx/sjZxzyAccountVouche/exportKmmxXls'
      },

      rules: {
        accName: [{ required: true, message: '请选择账套' }]
      },
      disableMixinCreated: true,
      selectedRow: []
    }
  },
  mounted() {
    // this.openSearchModel()
  },
  computed: {
    rowSelectionOp() {
      return {
        type: 'radio',
        // getCheckboxProps: (record) => {
        //   if (this.checkedKeys.includes(record.id)) {
        //     record.index = 0
        //     this.checkedRows = [{ ...record }]
        //     this.model.assistType = record.assistCode
        //   }
        //   return {
        //     props: {
        //       // disabled: record.name === 'Disabled User',
        //       // name: record.name,
        //       defaultChecked: this.checkedKeys.includes(record.id), // 该属性用于默认勾选处理
        //     },
        //   }
        // },
        selectedRowKeys: this.selectedRowKeys,
        onChange: (selectedRowKeys, selectedRows) => {
          this.selectedRowKeys = [...selectedRowKeys]
          this.superParam.subjectCode = selectedRows[0].subjectCode
          this.superParam.subjectName = selectedRows[0].subjectName
          this.loadData(1)
        }
      }
    }
  },
  methods: {
    searchReset() {
      this.queryParam = this.$options.data().queryParam
      this.dataSource = []
      this.leftDataSource = []
      this.superParam = {}
      this.dateArray = [beforeyearYMD(2, 'years'), currentYMD()]
      this.ipagination = this.$options.data().ipagination
    },
    onSearchconfigParams(param) {
      this.selectedRowKeys = []
      this.queryParam = Object.assign({}, param)
      if (!param.subjectCode) {
        this.queryParam.subject = ''
      }
      if (this.queryParam.timeType == 1) {
        this.queryParam.startTime = this.queryParam.startTime.split('-').join('')
        this.queryParam.endTime = this.queryParam.endTime.split('-').join('')
      }
      this.queryParam.time = `${param.startTime}~${param.endTime}`
      this.onSearch()
    },
    clearSearchconfigParams() {
      this.superParam = this.$options.data().superParam
      this.selectedRow = []
      this.searchReset()
    },
    onSearch() {
      this.getLeftTable()
      this.dataSource = []
    },
    openSearchModel() {
      this.$refs.searchModal.edit(this.queryParam)
      this.$refs.searchModal.isCheck = false
      this.$refs.searchModal.disableSubmit = false
    },
    getLeftTable() {
      console.log(this.queryParam)
      this.loading = true
      getAction(this.url.leftList, this.queryParam).then(res => {
        if (res.success) {
          this.leftDataSource = res.result.records || res.result
        }else{
          this.$message.error(res.message)
        }
        if (res.code === 510) {
          this.$message.warning(res.message)
        }
        this.loading = false
      })
    },
    handleClickRow1(record, index) {
      return {
        on: {
          click: () => {
            this.superParam.subjectCode = record.subjectCode
            this.superParam.subjectName = record.subjectName
            this.loadData(1)
          }
        }
      }
    },

    handleClickRow2(record, index) {
      this.handleCheck(record, '凭证')
      // return {
      //   on: {
      //     dblclick: () => {
      //       this.handleCheck(record, '凭证')
      //     },
      //   },
      // }
      // this.$router.push({
      //   name: 'sjxmzygl-yzzx-jtpzcx',
      //   params: {
      //     from: 'kmmx',
      //     param: this.queryParam,
      //     superParam: { ...this.superParam, subject: this.subjectName },
      //     record,
      //   },
      // })
    },
    updateProList() {
      this.loadData(1)
    },
    openOrganModel() {
      this.$refs.departModal.edit()
    },
    handleToYD(record) {
      if (this.dataSource.length) {
        const { startTime = '', endTime = '' } = this.queryParam
        let ydnr = undefined
        if (record) {
          ydnr = `【科目名称：${this.superParam.subjectName}】【凭证字号：${record.docCode}】`
        }
        let time = `【${startTime}～${endTime}】【科目明细表】`
        this.addYd(this.queryParam, ydnr, time)
      } else {
        this.$message.error('空数据不能新建疑点')
      }
    },
    KmyeSearch(params) {
      let { param, record } = params
      let Queryparams = {
        subjectCode: record.subjectCode,
        subject: record.subjectName
      }
      this.onSearchconfigParams(Object.assign({}, param, Queryparams))
    },
    ZzsSezrch(params) {
      debugger
      let { startTime, endTime, accUnitId, acctUnitNm } = params
      this.queryParam.accName = acctUnitNm
      this.queryParam.unitId = accUnitId
      // this.queryParam.accCode = accUnitId
      this.queryParam.startTime = startTime
      this.queryParam.endTime = endTime
      this.queryParam.timeType = '2'
      this.queryParam.time = `${startTime}~${endTime}`
      this.onSearch()
    },
    handleExportXls() {
      this.loadingExp = true
      getAction(this.url.exportXlsUrl, { ...Object.assign({}, this.queryParam, this.superParam) }).then(res => {
        this.$message.success('正在下载，请稍等！')
        let url = `${window._CONFIG['domianURL']}/sys/common/static${res.result}`
        // let url = `${window._CONFIG['domianURL']}/sys/common/static${res.result}`
        window.open(url, '_blank')
        this.loadingExp = false
      })
    }
  }
}
</script>
<style lang="less" scoped>
@import '~@assets/less/common.less';
</style>
<style scoped>
.ant-select-dropdown {
  width: 300px;
}
</style>
<style lang="less" scoped>
.pointer_table {
  /deep/ .ant-table-row {
    cursor: pointer;
  }
}
</style>
